.plant-t-clock-calculator{
    width:100%;
    height:100%;
    .screen{
        width:90%;
        height:80px;
        margin:0 auto;
        background-color: #000;
        border:solid 1px #000;
        margin-top: 20px;
        .num-panel{
            float:left;
            width:50px;
            height:80px;
            margin:0 2px;
            background-color: #000;
            position:relative;
            .r{
                width:30px;
                height:6px;
                background-color: #222;
                position:absolute;
                .box{
                    width:100%;
                    height:100%;
                    position:relative;
                    .arrow-l{
                        position: absolute;
                        width:0;
                        height:0;
                        border-top:solid 3px rgba(0,0,0,0);
                        border-left:solid 3px rgba(0,0,0,0);
                        border-bottom:solid 3px rgba(0,0,0,0);
                        border-right:solid 3px #222;
                        left:-6px;
                    }
                    .arrow-r{
                        position: absolute;
                        width:0;
                        height:0;
                        border-top:solid 3px rgba(0,0,0,0);
                        border-left:solid 3px #222;
                        border-bottom:solid 3px rgba(0,0,0,0);
                        border-right:solid 3px rgba(0,0,0,0);
                        right:-6px;
                    }
                }
            }

            .c{
                width:6px;
                height:20px;
                background-color: #222;
                position:absolute;
                .box{
                    width:100%;
                    height:100%;
                    position:relative;
                    .arrow-t{
                        position: absolute;
                        width:0;
                        height:0;
                        border-top:solid 3px rgba(0,0,0,0);
                        border-left:solid 3px rgba(0,0,0,0);
                        border-bottom:solid 3px #222;
                        border-right:solid 3px rgba(0,0,0,0);
                        top:-6px;
                    }
                    .arrow-b{
                        position: absolute;
                        width:0;
                        height:0;
                        border-top:solid 3px #222;
                        border-left:solid 3px rgba(0,0,0,0);
                        border-bottom:solid 3px rgba(0,0,0,0);
                        border-right:solid 3px rgba(0,0,0,0);
                        bottom:-6px;
                    }
                }
            }

            .p1{
                top:1px;
                left:10px;
            }

            .p3{
                top:38px;
                left:10px;
            }

            .p6{
                bottom:1px;
                left:10px;
            }

            .p2{
                top:13px;
                right:1px;
            }

            .p4{
                top:13px;
                left:1px;
            }

            .p5{
                top:49px;
                right:1px;
            }

            .p7{
                top:49px;
                left:1px;
            }
        }
    }
    .calculator{
        flex:1;
        height:100%;
        
        .num-pad{
            width:80%;
        }
    }
    .calculate-history{
        flex:1;
        height:100%;
    }
}